<template>
  <div>
    <CnBoldP class="mt-11 text-20">采集频率快捷配置</CnBoldP>
    <CnNormalP class="mt-6 mb-20 text-4xText"> 可以快速、批量配置设备的采集频率 </CnNormalP>
    <ProductFilesItem></ProductFilesItem>

    <div class="card_wrap">
      <div class="pl_box">
        <a-card>
          <div class="title_box">频率</div>
          <div class="content">
            <span class="label_span">采集频率</span>
            <a-input-number
              style="width: 120px"
              v-model:value="collectionFrequencyValue"
              :min="0"
            ></a-input-number>
            <span class="unit_span">分钟</span>
          </div>
        </a-card>
      </div>
      <!-- <a-card class="card_item" style="height: 380px">选择设备</a-card> -->
      <DevCard
        class="card_item"
        :devDataList="devDataList"
        :devIds="devIds"
        @updateDevIdsFunc="updateDevIdsFunc"
      ></DevCard>
      <a-card class="card_item">
        <div class="content">
          <a-popconfirm
            title="提示:请确保采集频率不为空,确定保存将会清除设备之前的配置,请谨慎操作!"
            ok-text="确定"
            cancel-text="取消"
            @confirm="submitConfirmClick"
            @cancel="submitCancelClick"
            :disabled="isDisabled"
          >
            <a-button type="primary" :disabled="isDisabled">保存</a-button>
          </a-popconfirm>
          <a-button style="margin-left: 20px" @click="goBack">返回</a-button>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts">
  import {defineComponent, ref, onMounted, computed} from 'vue'

  export default defineComponent({
    name: 'Frequency'
  })
</script>
<script lang="ts" setup>
  // 引入
  import {
    standardSelectType,
    standardSelectTypeList,
    paramType,
    paramTypeList,
    devType,
    devTypeList,
    paramStandard,
    paramStandardList
  } from '../../../standard/module/paramCard/type.ts'
  import {selectDevListApi, submitQuickCollectRateApi} from '@/api/quickConfiguration_frequency.ts'
  import {ProductFilesItem} from '@/components/others/productFilesItem'
  import {CnNormalP, CnBoldP} from '@/components/text'
  import DevCard from './module/devCard/index.vue'
  // import {ProductFilesItem} from '@/components/others/productFilesItem'
  // import {CnNormalP, CnBoldP} from '@/components/text'
  import {message} from 'ant-design-vue'
  import {getUserId} from '@/libs/auth'
  import useGlobalAPI from '@/hooks/useGlobalAPI'
  const {router} = useGlobalAPI()

  // 保存按钮提示的确定点击事件
  const submitConfirmClick = () => {
    submitClick()
  }

  // 保存按钮提示的取消点击事件
  const submitCancelClick = () => {}

  // 保存提交数据的方法
  const submitClick = async () => {
    if (
      collectionFrequencyValue.value == '' ||
      collectionFrequencyValue.value == null ||
      collectionFrequencyValue.value == undefined
    ) {
      message.warning('采集频率不能为空!')
    }
    if (devIds.value == '' || devIds.value == null || devIds.value == undefined) {
      message.warning('采集频率不能为空!')
    }
    let data = {
      devIds: devIds.value,
      devCRValue: collectionFrequencyValue.value.toString()
    }

    await submitQuickCollectRateApi(data)
      .then(() => {
        message.success('配置采集频率成功!')
      })
      .catch(() => {
        message.error('配置采集频率失败!')
      })
    console.log(data, '采集频率提交数据')
  }

  // 返回按钮的点击事件
  const goBack = () => {
    router.back()
  }

  // 修改devIds的方法
  const updateDevIdsFunc = (devIdsStr: string) => {
    devIds.value = devIdsStr
  }

  /* 数据 ------------------------------------- */

  // 保存按钮禁用状态的标识
  const isDisabled = computed(() => {
    let flag = true
    if (
      collectionFrequencyValue.value != '' &&
      collectionFrequencyValue.value != null &&
      collectionFrequencyValue.value != undefined &&
      devIds.value != '' &&
      devIds.value != null &&
      devIds.value != undefined
    ) {
      flag = false
    }
    return flag
  })

  // 采集频率
  const collectionFrequencyValue = ref('')

  // 设备Ids数据
  const devIds = ref('')

  // 设备列表数据
  const devDataList = ref('')

  // 获取设备列表的方法
  const getDevListFunc = async () => {
    let userId = getUserId()
    const res = await selectDevListApi({platFormSubUserId: userId})
    // console.log(res.data)
    devDataList.value = res.data
  }

  // 初始化
  onMounted(() => {
    getDevListFunc()
  })
</script>

<style lang="less" scoped>
  .card_wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    // .pv_box {
    ::v-deep .ant-card-body {
      padding: 18px 0px;
      // }
    }

    .title_box {
      padding: 3px 0px 3px 20px;
      font-size: 18px;
      letter-spacing: 2px;
      font-weight: bold;
      color: #324569;
      margin-bottom: 15px;
      background-image: url(https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/card-vein-inline.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .content {
      padding-left: 20px;
      .label_span {
        margin-right: 6px;
        font-weight: 500 !important;
        font-family: kaigengo-medium !important;
        --tw-text-opacity: 1 !important;
        color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
      }
      .unit_span {
        margin-left: 10px;
        font-size: 14px;
        color: gray;
      }
    }

    .card_item {
      margin-top: 14px;
    }
  }
</style>
